<template>
    <div>
          <div class="banner">
            <el-carousel :interval="4000" type="card" height="500px">
              <el-carousel-item v-for="(item,index) in list_img" :key="index">
                <h3> <img :src="item.picture" ></h3>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="mod-item">
            <div class="title">
              Recommend
              <br>
              贫困户推荐
            </div>
            <ul>
              <li v-for="(item,index) in list_pinkun" :key="index"
              @click="$router.push('/pinkunInfo/'+item.id)">
                <img :src="item.cover" alt="">
                <span>{{item.name}}</span>
              </li>
            </ul>
            <div class="gengduo"
            @click="pinkunhu()"
            >
              <span>更多</span>
            </div>
          </div>
          <div class="mod-item">
            <div class="title">
              Recommend
              <br>
              扶贫政策推荐
            </div>
            <ul>
              <li v-for="(item,index) in list_fupin" :key="index"
              @click="$router.push('/fupinInfo/'+item.id)">
                <img :src="item.cover" alt="">
                <span>{{item.type}}</span>
              </li>
            </ul>
            <div class="gengduo"
            @click="fupin()"
            >
              更多
            </div>
          </div>
    </div>
</template>


<script>
export default {
    data() {
        return {
          list_img:[],
          list_pinkun:[],
          list_fupin:[],
        };
    },
    methods:{
    async getBanner(){
        let { data : res } = await this.$axios.get("carousel/getlist")
        this.list_img = res.data.list
        // console.log(this.list_img );
      },
    async getPinkun(){
        let { data : res } = await this.$axios.get("/poor/getlist?pageNum=1&pageSize=2")
        console.log(res.data.list);
        this.list_pinkun = res.data.list
      },
      async getFupin(){
        let { data : res } = await this.$axios.get("/alleviation/getlist?pageNum=1&pageSize=2")
        console.log(res.data.list);
        this.list_fupin = res.data.list
      },
      pinkunhu(){
        this.$router.push('/pinkunView')
      },
      fupin(){
        this.$router.push('/fupinView')
      }
    },
    created(){
      this.getBanner()
      this.getPinkun()
      this.getFupin()
    }
}
</script>


<style  lang="scss" scoped> 
.mod-item{
  width: 100%;

  margin: 0 auto;
  .title{

  font-size: 25px;
  text-align: center;
  color: white;
  background: rgb(136,169,214);
  }
ul{
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  li{
    width: 45%;
    height: 100px;
    border: 1px solid #999;
    margin-left: 10px;
    margin-top: 5px;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 10px 10px 5px #888888;
    border-radius: 5px ;
    span{
      display: inline-flex;
      margin: 0 auto;
    }
    img{
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
}
.gengduo{ 
      width: 80px;
      height: 30px;
      text-align: center;
      margin: 0 auto;
      line-height: 30px;  
      border-radius: 20px;
      border: 1px solid rgb(136,169,214);
      color:rgb(136,169,214) ;
}
}

</style>